<template>
    <div id="mount-point" v-if="a" class="aa">
        <button-counter></button-counter>
    </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'index',
  data () {
    return {
      a: false
    }
  },
  methods: {
    createDom () {
      let ButtonCont = Vue.component('button-counter', {
        name: 'ButtonCont',
        data: function () {
          return {
            count: 0,
            scp:scp
          }
        },
        template: '<button v-on:click="scp.post(12)">You clicked me {{ count }} times.</button>'
      })
this.a =true
      // var Profile = Vue.extend({
      //  template: '<div><p>{{firstName}} {{lastName}} aka {{alias}}</p><p><button-cont></button-cont></p></div>',
      //  components: { ButtonCont },
      //  data: function () {
      //    return {
      //      firstName: 'Walter',
      //      lastName: 'White',
      //      alias: 'Heisenberg'
      //    }
      //  }
      // })
      /// / 创建 Profile 实例，并挂载到一个元素上。
      // new Profile().$mount('#mount-point')
    }
  },
  mounted () {
    this.createDom()
  }
}
</script>

<style scoped lang="less">
.abac{
    .aa{
        background-color: red;
    }
}
</style>
